<template>
  <p>state.name: {{ state.name }}</p>
  <p>state.age: {{ state.age }}</p>
  <p>nameRef: {{ nameRef }}</p>
  <p>ageRef: {{ ageRef }}</p>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>
</template>

<script>
import { ref, toRef, reactive, toRefs } from "vue";

/* 从响应式对象中分离出响应式值（令模板中使用数据更简单） */
export default {
  name: "ToRef",
  setup() {
    /* 值类型响应式数据 */
    const state = reactive({
      name: "steve",
      age: 24,
    });

    // 从响应式对象中分离出响应式的值（模板中使用起来更简单）
    const nameRef = toRef(state.name);
    const ageRef = toRef(state.age);

    // const tfs = toRefs(state)
    // console.log("tfs",tfs);//{name:Ref,age:Ref}
    // const { name, age } = toRefs(state);

    /* 向模板返回响应式数据 */
    return {
      state,
      nameRef,
      ageRef,
      //   name,
      //   age

      // 先将响对转为一个ref集合对象{ref1,ref2,ref3} 再原地打散为一堆key-value
      ...toRefs(state),
    };
  },
};
</script>
